import React, { useState } from 'react'
import { EyeOutlined } from '@ant-design/icons'
import './pagingList.css'
const PagingList: React.FC = () => {
  // 定义一个状态用于跟踪鼠标移动或移出的状态
  const [dataArr, setDataArr] = useState(false)
  // 用于跟踪当前我们鼠标选中的图像的下标，初始值为 1
  const [dataNum, setDataNum] = useState(1)
  // 这个状态可能用于控制某些元素的显示（比如悬停效果）
  const [dataft, setDataft] = useState(false)
  // 定义渲染图片数据的状态 
  const [imgsList, setImgsList] = useState([
    {
      imgall: [
        {
          imgs: "https://pub-cdn-oss.chuangkit.com/designTemplate/2022/11/29/c32422cc-5a81-4394-af58-ee647abccc9d_thumb_gif?v=1717853248000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fgif/cgif/35"
        },
        {
          imgs: "https://pub-cdn-oss.chuangkit.com/designTemplate/2024/08/30/714e2a68-e1d5-4848-9a3d-767f7d4cd777_thumb?v=1724980200000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70"
        },
        {
          imgs: "https://pub-cdn-oss.chuangkit.com/designTemplate/2024/09/13/1a1fd2b1-07b9-41f6-85a1-5aa5edf0684c_thumb?v=1726197961000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70"
        },
        {
          imgs: "https://pub-cdn-oss.chuangkit.com/designTemplate/2024/09/09/6b01291f-100d-4bdc-87b7-57c01c5d8828_thumb?v=1725843720000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70"
        },
        {
          imgs: "https://pub-cdn-oss.chuangkit.com/designTemplate/2024/09/04/bff25076-3e1e-426e-b230-9da8675fa8bc_thumb?v=1725444901000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70"
        },
        {
          imgs: "https://pub-cdn-oss.chuangkit.com/designTemplate/2024/07/17/3299ae5b-31a1-4c1e-ab33-6696fffe2173_thumb?v=1721203800000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70"
        },
        {
          imgs: "https://pub-cdn-oss.chuangkit.com/designTemplate/2024/06/25/93036790-9603-4d22-9904-d6d8de8c431c_thumb?v=1719278100000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70"
        },
        {
          imgs: "https://pub-cdn-oss.chuangkit.com/designTemplate/2024/05/31/30132bfc-72a7-4288-99d5-58090128fae9_thumb?v=1719197700000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70"
        },
        {
          imgs: "https://pub-cdn-oss.chuangkit.com/designTemplate/2024/05/18/2c385ca1-a57f-4cce-9b2c-c9c9215f7da5_thumb?v=1716014887000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70"
        },
        {
          imgs: "https://pub-cdn-oss.chuangkit.com/designTemplate/2023/12/27/4e036839-eb6a-4c59-9253-d52271c3c806_thumb?v=1716868844000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70"
        },
      ]
    }
  ])
  // 定义一个函数 当鼠标进入的时候触发
  const handelMouseEnter = (event: any) => {
    // 当鼠标进入某个目标元素时，调用 setDataft(true) 以更新状态
    setDataft(true)
    // 使用 event 获取鼠标位置和目标元素的位置，通过 getBoundingClientRect() 方法计算出目标元素的宽度
    const { clientX, target } = event
    // 使用getBoundingClientRect是一个 DOM 方法，获取目标元素的位置和尺寸信息
    const { left, right } = target.getBoundingClientRect()
    // 计算出这个图片的宽度
    const width = right - left;
    // 计算鼠标水平位置相对于元素左侧的距离占整个元素宽度的比例，并将其映射到 imgall 数组的长度上，得到一个值。
    const offset = ((clientX - left) / width) * imgsList[0].imgall.length
    // 更新  如果newIndex 在有效范围内（即大于等于 0 并且小于 imgall 数组的长度
    const newIndex = Math.floor(offset)
    // 则更新 dataNum 为 newIndex 的值，并设置 dataft 为 true
    if (newIndex >= 0 && newIndex < imgsList[0].imgall.length) {
      setDataNum(newIndex)
    }
  }
  // 当鼠标离开该元素时，此函数会被调用
  // 它会将 dataft 设置为 false，并且把 dataNum 重置为 0  也就是恢复到最初的状态
  const handelMouseLeave = () => {
    setDataft(false)
    setDataNum(0)  // 恢复到初始状态
  }
  return (
    <div className='paging-Box' onMouseEnter={() => { setDataArr(true) }} onMouseLeave={() => { setDataArr(false) }}>
      <div className="paging-Top">
        {
          imgsList && imgsList.map((item, index) => {
            return <div key={index} className='paging-Top-Item' onMouseMove={handelMouseEnter} onMouseLeave={handelMouseLeave}>
              <img src={item.imgall[dataNum].imgs} alt="slider" />
              {
                // 鼠标进入的时候显示
                dataft ? <div className='paging-bott'>
                  <p className='paging-bott-p'> {dataNum + 1}/{item.imgall.length}</p>
                  <span style={{ color: '#999999' }}><EyeOutlined />162</span>
                </div>
                  // 鼠标离开的时候显示
                  : <h4 className='paging-bott-h4'>不管今天是什么天气，记得带上自己的阳光</h4>
              }
            </div>
          })
        }
      </div>
      <div className="paging-Bottom">
        {
          // 调用状态做了一个判断
          dataArr ? <p className='paging-Bottom-p'>
            <h4 className='paging-Bottom-h4'>早安，您好</h4>
          </p> : ''
        }
      </div>
    </div>
  )
}

export default PagingList